<template>
  <div id="userRule">
    <div class="table-conBtn">
      <el-button
        type="warning"
        icon="el-icon-plus"
        :disabled="!canEdit"
        @click="editPrize('add')"
      >
        创建编号
      </el-button>
    </div>
    <!-- 表格部分 -->
    <el-table :data="tableData" style="width: 100%">
      <el-table-column type="index" width="60" align="center" label="序号">
      </el-table-column>
      <el-table-column
        prop="name"
        label="编号名称"
        align="center"
        min-width="150"
      ></el-table-column>
      <el-table-column
        prop="users"
        label="用户群"
        show-overflow-tooltip
        min-width="200"
      >
        <template slot-scope="{ row }">
          <span class="dpNum" @click="showDpNum(row.users)">{{
            filterUser(row.users)
          }}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="describe"
        label="编号描述"
        width="150"
      ></el-table-column>
      <el-table-column label="操作" width="120" fixed="right">
        <template slot-scope="{ row }">
          <el-button
            type="text"
            :disabled="isCheck"
            @click="editPrize('edit', row.id)"
          >
            编辑
          </el-button>
          <el-button
            type="text"
            :disabled="!canEdit"
            @click="deleteReach(row.id)"
          >
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div v-if="showBtn" class="btn-box">
      <el-button plain @click="cancelLabel">
        取 消
      </el-button>
      <el-button type="primary" @click="nextLab(prePage)">
        上一步
      </el-button>
      <el-button type="primary" @click="nextLab('touchSetting')">
        下一步
      </el-button>
    </div>
    <createAddEdit
      v-if="dialogReachData.isShow"
      :dialog-data="dialogReachData"
      @refresh="refresh"
    ></createAddEdit>
    <dialogDpNum
      v-if="dialogDpNum.isShow"
      :dialog-data="dialogDpNum"
    ></dialogDpNum>
  </div>
</template>

<script>
import { delReach } from '@component/activeManagement/common/js/lableApi' // 导入公用方法
import createAddEdit from '@component/activeManagement/common/createNum/dialogAddEdit' // 创建编号
import dialogDpNum from '@component/activeManagement/common/createNum/dialogDpNum' // 显示大鹏号
import { clearTagMixins } from '@/mixins/clearTag'
export default {
  name: 'userRule',
  msg: '预设用户规则',
  mixins: [clearTagMixins],
  components: {
    createAddEdit,
    dialogDpNum
  },
  props: ['type', 'subData', 'userRulList', 'backPage', 'id'],
  data() {
    return {
      loading: false,
      dialogReachData: {
        isShow: false, // 默认隐藏
        type: 'add', // 默认新增
        id: '' // 编辑时，传递的参数
      },
      dialogDpNum: {
        isShow: false, // 默认隐藏
        DpNum: [] // 大鹏号，数组
      },
      canEdit: true,
      isCheck: false,
      isSave: false //是否保存
    }
  },
  computed: {
    showBtn() {
      //是否显示保存按钮
      return this.type === 'add' || this.type === 'edit'
    },
    tableData() {
      return [...this.userRulList]
    },
    prePage() {
      return this.backPage === 'rankingLiList' ? 'actionShow' : 'actionRule'
    }
  },
  watch: {
    subData(newV) {
      if (newV.activityAuditing) {
        this.getCanEdit()
      }
    }
  },
  mounted() {},
  methods: {
    getCanEdit() {
      this.isCheck = this.type === 'check' ? true : false
      this.canEdit =
        (this.type === 'add' || this.type === 'edit') &&
        this.subData.activityAuditing.twoAuditing.auditingState !== 'PASS'
    },
    resetIsSave() {
      this.isSave = false
    },
    /*用户群-大鹏号*/
    filterUser(obj) {
      let ary = []
      obj.forEach((item) => {
        ary.push(item.dpNumber)
      })
      return ary.join(',')
    },
    /*点击用户群-出弹窗*/
    showDpNum(obj) {
      this.dialogDpNum.DpNum = obj
      this.dialogDpNum.isShow = true
    },
    /*取消*/
    cancelLabel() {
      if (this.isSave) {
        this.clearTag()
      } else {
        this.$confirm(
          '您的信息尚未保存，取消后所填写的信息将不被保存，确定要退出？',
          '提示',
          {
            distinguishCancelAndClose: true,
            confirmButtonText: '保存后退出',
            cancelButtonText: '直接退出',
            type: 'warning'
          }
        )
          .then(() => {
            this.$message.success('保存成功')
            this.isSave = true
            this.clearTag()
          })
          .catch((action) => {
            if (action === 'cancel') {
              this.clearTag()
            }
          })
      }
    },
    /*退出*/
    signOut() {
      this.$router.go(-1)
      // let query = {
      //   mId: this.$route.query.mId
      // }
      // this.$router.replace({ name: this.backPage, query: query })
    },
    /*下一步*/
    nextLab(labName) {
      this.$emit('changeLab', labName)
    },
    // 预置用户规则编辑
    editPrize(type, id = '') {
      this.dialogReachData.isShow = true
      this.dialogReachData.type = type
      this.dialogReachData.id = id
    },
    // 删除
    async deleteReach(pid) {
      this.$confirm('确定删除吗?', '删除提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let isSuccess = await delReach(this.id, pid)
          if (isSuccess === true) {
            this.$emit('getUserRulList')
          }
        })
        .catch(() => {})
    },
    // 刷新页面
    refresh() {
      this.$emit('getUserRulList')
    }
  }
}
</script>

<style lang="less">
#userRule {
  .dpNum {
    color: #1dc8a4;
    cursor: pointer;
  }
  .table-conBtn {
    margin-left: 0;
  }
  .btn-box {
    padding-top: 30px !important;
  }
}
</style>
